<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <!--<el-checkbox-group v-model="listQuery.userId">-->
      <!--<el-checkbox v-for="(uid, i) in uids" :key="i" :label="uid">{{ uid }}</el-checkbox>-->
      <!--</el-checkbox-group>-->
      <!--<div v-for="(uid, i) in uids" :key="i">{{uid}}</div>-->
      <el-select
        v-model.trim="listQuery.userId"
        clearable
        placeholder="选择用户"
        @change="doSearch"
        @clear="doSearch"
      >
        <el-option v-for="(uid, i) in uids" :key="i" :label="uid" :value="uid" />
      </el-select>
    </div>
    <div class="cs-filter-result">
      <el-row :gutter="20" style="display: flex;flex-wrap: wrap;">
        <el-col v-for="(item) in list" :key="item.chatId" :span="4" style="margin-bottom: 10px;">
          <el-card :body-style="{ padding: '0px' }">
            <image-tooltip :image-id="item.url">
              <img
                slot="img"
                :key="item.url"
                :src="item.url + '?x-oss-process=image/resize,w_175'"
                fit="contain"
                style="object-fit: contain;width: 175px;height: 320px;"
                @click="zoomImage(item.url)"
              >
            </image-tooltip>
            <div style="padding: 14px;">
              <el-button type="text" style="user-select: text;" native-type="button"><a target="_blank" :href="item.uid | filterHref('/account/account-list?id=')">{{ item.uid }}</a></el-button>
              <div>{{ item.createTime | parseTime }}</div>
              <div>{{ '鉴黄分数:' + item.rate }}</div>
              <div>监控状态: {{ item.monitoringStatus ? "开启" : "关闭" }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
    <ImageViewer
      :visible.sync="showImage"
      :url="videoUrl"
      :type="'image'"
    />
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import ImageViewer from '@/components/ImageViewer'

import { xhrVideoThumbAll } from '@api/anchor'
import AnchorMixin from './mixin'

export default {
  name: 'RoleList',
  components: { TablePagination, ImageViewer },
  mixins: [AnchorMixin],
  data() {
    return {
      list: null,
      total: 0,
      uids: [],
      listQuery: {
        page: 1,
        limit: 100,
        userId: null,
        channelId: this.$route.query && this.$route.query.id || null
      },
      daterangeValue: '',
      showImage: false,
      videoUrl: '',
      selectRows: []
    }
  },

  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      if (!this.validateParams(this.listQuery)) {
        return
      }
      if (!this.listQuery.channelId) {
        this.$message.error('没有指定频道id')
        return
      }
      xhrVideoThumbAll(this.listQuery)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.count
          this.uids = resp.data.uids
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    zoomImage(url) {
      this.showImage = true
      this.videoUrl = url
    },
    onClickUser(uid) {
      this.$router.push('/account/account-list?id=' + uid)
    }
  }
}
</script>
<style lang="scss" scoped>
  .video-wrap {
    position: relative;
    video {
      width: 100%;
    }
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
  }
</style>
